<template>
  <div class="Login">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>登录管理系统</span>
      </div>
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur',
            },
            {
              min: 4,
              max: 10,
              message: '长度在4-10字符',
              trigger: 'blur',
            },
          ]"
        >
          <el-input type="text" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
            {
              min: 6,
              max: 12,
              message: '长度6-12位的密码',
              trigger: 'blur',
            },
          ]"
        >
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "user1",
        password: "",
      },
      loading: true,
    };
  },
  methods: {
    login(form) {
      // console.log(this.form);
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          this.service
            .post("/auth/api/Login/Login", this.form)
            .then((res) => {
              console.log(res.data);
              localStorage.setItem("token", res.data.tokenAccess);
              localStorage.setItem("username", res.data.nickName);
              localStorage.setItem("userid", res.data.userid);
              this.$router.push("/home");
              this.$notify({
                title: "成功",
                message: res.data.nickName + " 登录成功！",
                type: "success",
              });
            })
            .catch((err) => {
              console.log(err);
              this.$notify({
                title: "报错",
                message: err.response.data,
                type: "error",
              });
            });
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.Login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #409eff;
  .box-card {
    width: 450px;
    margin: 200px auto;
    .el-card__header {
      font-size: 30px;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
